<script lang="ts" setup>
defineOptions({
  name: "HomeNextStory",
});
import {
  classNameHomeItemList,
  classNameHomeWrapListItem,
  classNameNextStory,
  classNameProgressBar,
} from "@/config/const_var";
import { articleDetailRoute, articleDetailRRoute, homeRoute } from "@/router";
import { getImg } from "@/utils";
let router = useRouter();

function handleNextStory(_event: any) {
  let currentPath = router.currentRoute.value.path;
  if (currentPath === homeRoute.path) {
    let firstItem = document.querySelector(
      `.${classNameHomeWrapListItem}`
    )?.firstElementChild;
    firstItem?.scrollIntoView({
      behavior: "smooth",
    });
  }

  if (
    currentPath === articleDetailRoute.path ||
    currentPath === articleDetailRRoute.path
  ) {
    let firstItem = document.querySelector(
      `.${classNameHomeItemList}`
    )?.firstElementChild;
    firstItem?.scrollIntoView({
      behavior: "smooth",
    });
  }
}
</script>
<template>
  <div @click="handleNextStory" :class="classNameNextStory">
    <div class="txt title08">{{ $t("title08") }}</div>
    <img :src="getImg('next@2x.png')" alt="" />
    <div :class="classNameProgressBar"></div>
  </div>
</template>

<style lang="scss" scoped>
.#{$scss-classNameNextStory} {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 4px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  padding: 0 10px;
  overflow: hidden;

  .#{$scss-classNameProgressBar} {
    background-color: rgba(55, 166, 254, 0.6);
    height: 100%;
    width: 0%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .txt {
    color: #ffffff;
    font-size: 12px;
  }

  img {
    width: 10px;
    height: 10px;
  }
}
</style>
